<template>
  <el-row class="searchFactory">
    <div style="padding-top: 10px">订单编号</div>
    <el-input
      class="factoryInput"
      v-model="orderCode"
      style="width: 15%"
    ></el-input>
    <el-button class="searchBtn" @click="search()">查询</el-button>
    <el-button class="resetBtn" @click="reset()">重置</el-button>
  </el-row>
  <el-row class="formCard">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" width="180">
        <template #default="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" width="180">
        <template #default="scope">
          <span>{{ scope.row.proName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订购数量" width="100">
        <template #default="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交付日期" width="180">
        <template #default="scope">
          <span>{{ scope.row.handInDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投标截止日期" width="180">
        <template #default="scope">
          <span>{{ scope.row.deadline }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人" width="150">
        <template #default="scope">
          <span>{{ scope.row.receiver }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人联系方式" width="200">
        <template #default="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货地址" width="200">
        <template #default="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="80">
        <template #default="scope">
          <span>{{ scope.row.customerState }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>

<script>
import axios from 'axios'
export default {
  name: 'orderManage',
  data() {
    return {
      tableData: [{}],
      newTable: [{}],
      orderCode: '',
    }
  },
  mounted() {
    this.getOrder()
  },
  methods: {
    getOrder() {
      axios
        .get('/order/listAdminOrder')
        .then((res) => {
          console.log(res.data.data)
          this.tableData = res.data.data
        })
        .catch((err) => {
          console.error(err)
        })
    },
    search() {
      this.newTable = this.tableData
      this.tableData = this.newTable.filter((val) => val.code == this.orderCode)
    },
    reset() {
      this.getOrder()
    },
  },
}
</script>

<style lang="less" scoped>
.el-input {
  width: 10rem;
  padding: 0 30px 30px 30px;
  font-size: 1.2em;
}
.el-button {
  height: 10px;
}
.addBtn {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  font-weight: bold;
}
</style>
